import './Mars3dSetUp.scss'
import { v4 } from 'uuid'
import { Button } from 'antd'
import { useState } from 'react'
import { useMount } from 'ahooks'
import PropTypes from 'prop-types'
import { useRequest } from 'alova'

import { Http } from '../../Api'

import { UseConfigSection } from '../../Template/FormTemplate'

const Mars3dOthA03 = ({ data, Off, ModalEvent }) => {
    Mars3dOthA03.propTypes = { data: PropTypes.object, Off: PropTypes.func, ModalEvent: PropTypes.object }

    const [Uuid, setUuid] = useState()
    const [List, setList] = useState()
    const [Data, setData] = useState()

    const [Loading, setLoading] = useState(false)


    const { send } = useRequest(params => Http({ url: 'getFileNameByPathAndContent', params }), { immediate: false })
    const { send: getEle } = useRequest(params => Http({ url: 'getCommonJsonInfoByUuid', params: { uuid: `element/${params}` } }), { immediate: false })


    useMount(() => {
        const { obj, gro } = data
        send({ FilePath: 'element', PathType: 0 }).then(res => {
            const uuid = v4()
            obj[uuid] = { element: '', groKey: '', sortId: 0 }
            const options = res.map(({ fileName }) => ({ label: fileName.split('.')[0], value: fileName.split('.')[0] }))
            const group = Object.keys(gro).map(key => gro[key]).sort((a, b) => a.sort - b.sort).map(item => ({ label: item.label, value: item.key }))
            setData(obj)
            setUuid(uuid)
            setList([
                { key: 101, uuid, label: '引入元素', type: 'SelectTemp', name: 'element', options },
                { key: 102, uuid, label: '元素分组', type: 'SelectTemp', name: 'groKey', options: group },
                { key: 103, uuid, label: '元素排序', type: 'InputNumberTemp', name: 'sortId' },
            ])
        })
    })


    const onSubmit = () => {
        setLoading(true)
        const { groKey: key, sortId, element } = Data[Uuid]
        getEle(element).then(res => {
            res.uuid = Uuid
            res.sortId = sortId
            Data[Uuid] = res
            ModalEvent.emit({ type: 'importElement', data: { obj: Data, uuid: Uuid, key } })
            Off()
        })
    }
    return (
        <div className='Mars3dSetUp Mars3dOthA03'>
            <div className='FormList'>
                {Uuid && List && Data && UseConfigSection(Data, List)}
            </div>
            <div className='Button'>
                <Button type='primary' loading={Loading} danger onClick={Off}>取消</Button>
                <Button type='primary' loading={Loading} onClick={onSubmit}>保存</Button>
            </div>
        </div>
    );
};

export default Mars3dOthA03;